<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应用下载</title>
  <style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    html, body {min-height: 100%;}
    body {
      padding-top: 10vh; color: #333; text-align: center;
      font-family: Arial, sans-serif;
      /* background: linear-gradient(180deg, #c5f4ff, #f0fcff); */
      background: url("") no-repeat 0 0;
      background-size: 100% auto;
    }
    .title {font-size: 8vw; font-weight: bold; line-height: 1.5;}
    .subtitle {font-size: 5vw; font-weight: 100; line-height: 3;}
    .btn {
      width: 35vw; height: 12vw; margin: 3vw;
      border-radius: 4vw; border: none; font-size: 4vw; color: #fff;
    }
    .btn svg {width: 4vw; height: 4vw; vertical-align: text-top;}
    .btn-primary {
      background: linear-gradient(90deg, #45a7fd, #0bcbfb);
    }
    .btn-warning {
      background: linear-gradient(90deg, #fa9206, #fec547);
    }
    .bottom-img {
      display: block; width: 85vw; height: auto; margin: 5vw auto 0;
    }
    .wxmask {
      position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;
      padding-top: 14vh; color: #fff; background: rgba(0,0,0,.75);
      display: none;
    }
    .wxmask-text {font-size: 5vw; line-height: 1.5;}
    .wxmask-text-warn {font-size: 3.2vw; line-height: 5;}
    .wxmask-arrow {
      position: absolute; top: 4vw; right: 4vw; width: 25vw; height: 25vw;
      background: url("") no-repeat top right;
      background-size: contain;
    }
  </style>
</head>

<body>
  <div class="title">慧听说</div>
  <div class="subtitle">专业的英语听说训练基地</div>
  <div class="btn-wrapper">
    <button class="btn btn-primary" onclick="downloadApp('student')">
      <svg width="200px" height="200px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M896 1011.2H128c-25.6 0-44.8-19.2-44.8-44.8 0-185.6 153.6-339.2 339.2-339.2h172.8c185.6 0 339.2 153.6 339.2 339.2 6.4 25.6-12.8 44.8-38.4 44.8zM512 12.8c147.2 0 268.8 102.4 307.2 236.8H204.8C243.2 108.8 364.8 12.8 512 12.8z" fill="#ffffff" /><path d="M896 371.2h-64c-19.2 153.6-153.6 275.2-320 275.2-179.2 0-320-140.8-320-320v-44.8h704c25.6 0 44.8 19.2 44.8 44.8 0 25.6-19.2 44.8-44.8 44.8z m-633.6 0C281.6 492.8 384 588.8 512 588.8s230.4-89.6 249.6-211.2c0-6.4-499.2-6.4-499.2-6.4z" fill="#ffffff" /></svg>
      下载学生端
    </button>
    <button class="btn btn-warning" onclick="downloadApp('teacher')">
      <svg width="200px" height="200px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M736.761532 280.671401c0-119.791294-101.33699-216.869283-226.324632-216.869283-125.011178 0-226.348168 97.077989-226.348168 216.869283 0 4.859681 0 23.89113 0 28.750811 0 3.415796 0 17.057491 0 20.594037 0 124.795261 101.33699 310.170249 226.348168 310.170249 124.987642 0 226.324632-185.374988 226.324632-310.170249 0-3.536546 0-17.178241 0-20.594037C736.761532 304.561507 736.761532 285.531082 736.761532 280.671401zM890.211413 747.441267c-63.324234-55.888891-192.185091-114.977661-215.594243-125.492132-0.240477 0.240477-0.481977 0.456395-0.722454 0.697895 0.216941 5.821589 0.530073 11.620665 0.530073 17.563004 0 120.584356-45.712111 222.907813-109.396549 260.968663l-23.697725-122.147968 24.636097-28.485775-54.277184-49.272193-54.278207 49.272193 24.63712 28.485775-23.987321 123.543757c-64.863287-36.931121-111.658056-140.337235-111.658056-262.365476 0-5.869684 0.313132-11.619642 0.529049-17.417695-28.028357 12.654204-152.077627 70.203922-213.764572 124.649951-69.795623 61.591777-70.830185 212.527394-70.830185 212.527394l346.45157 0 205.801203 0 346.452593 0C961.040574 959.968661 960.007035 809.034067 890.211413 747.441267z" fill="#ffffff" /></svg>
      下载教师端
    </button>
  </div>
  <img class="bottom-img" src="" />
  <div class="wxmask" onclick="this.style.display = 'none'">
    <div class="wxmask-text">点击右上角</div>
    <div class="wxmask-text">选择浏览器打开</div>
    <div class="wxmask-text-warn">如浏览器打开失败，请移步桌面直接打开应用</div>
    <div class="wxmask-arrow"></div>
  </div>

  <script>
    // 下载APP
    function downloadApp(type) {
      if (isWeixinBrowser()) {
        let wxmask = document.querySelector('.wxmask');
        wxmask && (wxmask.style.display = 'block');
        return
      }
      let url = '';
      let osname = getOS();
      let client = osname + '_' + type;
      let isIOS = osname === 'ios';
      if (type === 'student' && isIOS) { url = 'https://apps.apple.com/cn/app/%E6%85%A7%E5%90%AC%E8%AF%B4/id1317641807'; }
      else if (type === 'student') { url = 'https://jsxfdowload.jsxfedu.com/huitingshuo/hts-student.apk'; }
      else if (type === 'teacher' && isIOS) { url = 'https://apps.apple.com/cn/app/%E6%85%A7%E5%90%AC%E8%AF%B4%E6%95%99%E5%B8%88%E7%AB%AF/id1387707272'; }
      else if (type === 'teacher') { url = 'https://jsxfdowload.jsxfedu.com/huitingshuo/hts-teacher.apk'; }
      addDownloadRecord(client).finally(function () {
        window.location.href = url;
      });
    }

    // 检测是否为微信浏览器
    function isWeixinBrowser() {
      const ua = navigator.userAgent.toLowerCase();
      return ua.indexOf('micromessenger') !== -1;
    }

    // 检测设备操作系统
    function getOS() {
      const ua = navigator.userAgent;
      if (/android/i.test(ua)) {
        return 'android';
      } else if (/iphone|ipad|ipod/i.test(ua)) {
        return 'ios';
      }
      return 'unknown';
    }

    // 添加下载记录
    function addDownloadRecord(client) {
      let api = '/english-student/app-download-record/save';
      let baseUrl = 'https://gateway.yytsks.com';
      if (window.location.host.indexOf('qa.') > -1) {
        baseUrl = 'https://jsxf-english-gateway-qa.qalb.jsxfedu.net'
      }
      return new Promise(function (resolve, reject) {
        let data = JSON.stringify({ client: client || '', remark: navigator.userAgent || '' });
        let xhr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', function() {
          if (this.readyState === 4 && this.status === 200) {
            let data = JSON.parse(this.responseText);
            if (data.code === 0) {
              resolve(data.data);
            } else {
              reject(data.message || data.msg);
            }
          } else if (this.readyState === 4) {
            reject('添加记录失败！');
          }
        });
        xhr.open('POST', baseUrl + api);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(data);
      });
    }
  </script>
</body>

</html>
